iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Modern Web

我的菜很有Vue味~系列 第 14

Day14 Vue directives(v-for)上

  • 分享至 

  • xImage
  •  

用v-for把陣列轉成元素

一開始我們先把items的資料容給見出來

接下來呢我們用v-for="item in items"去把items裡的內容抓出來,把元素指定為item,再用{{item}}把內容渲染出來。

最後呈現出來的結果如下。

在上面我們除了用item以外我們還可以用index這元素去修改,呈現結果如下。


用v-for把物件轉為元素

在上面我們除了把陣列轉成元素以外我們也可以用物件來轉成元素。
一開始和上面的差別就是把陣列換成物件而已。

那在這如果想知道物件的key職的話我們需要把上面的index改成key就大功告成了。

最後呈現結果。

v-for是不是很簡單!

今天就先到這了,明天見~


上一篇
Day13 Vue directives(v-if & v-show)
下一篇
Day15 Vue directives(v-for)下
系列文
我的菜很有Vue味~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言